<template>
    <view :style="{ '--color': color }">
        <view class="Crad" v-if="pageData">
            <view class="Crad-info" :style="{ backgroundImage: 'url(' + pageData.background + ')' }">
                <text class="white size34 ellipsis_2">{{ pageData.name }}</text>
                <block v-if="pageData.state == 1">
                    <view class="row j-sb a-center m-top40 m-bot20" v-if="Buy">
                        <view class="Remaining">
                            <text class="size26">剩余</text>
                            <text class="size32 m-left4 m-right4">{{ pageData.last_times }}</text>
                            <text class="size26">次</text>
                        </view>
                        <text class="white size32">{{ pageData.expired_time }}</text>
                    </view>
                    <view class="row j-sb a-center m-top20" v-if="!Buy">
                        <view class="d-flex a-center white">
                            <text class="size28 bold m-top20 m-right4">￥</text>
                            <text class="size60 bold">{{ pageData.price }}</text>
                            <text class="size28 m-left10 m-top10">/ {{ pageData.all_times }}次</text>
                        </view>
                        <view class="d-flex f-column a-center">
                            <view class="Buynow" @click.stop="show = true">立即购买</view>
                            <text class="white h6 m-top10">已售：{{ pageData.sales }}份</text>
                        </view>
                    </view>
                </block>
            </view>

            <view class="introduce">{{ pageData.desc }}</view>
        </view>
        <u-popup :show="show" @close="show = false" round="10" closeable>
            <view class="Warpper">
                <text class="title">支付方式</text>
                <view class="Box">
                    <view class="list" :class="{ active: pay_type == 1 }" @click="pay_type = 1">
                        <view class="iconfont icon-weixin color_16d size80"></view>
                        <text class="color_33 size30">微信支付</text>
                    </view>
                    <view class="list" :class="{ active: pay_type == 2 }" @click="pay_type = 2">
                        <view class="iconfont icon-a-016 color_33 size80"></view>
                        <text class="color_33 size30">余额支付</text>
                    </view>
                </view>

                <view class="Continue" :class="{ conActive: pay_type != 0 }" @click="BuyBtn">支付</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        props: ['Buy', 'pageData', 'cardId'],
        data() {
            return {
                headImg: 'https://msraimgcdn.mogoie.com/6099/1709797684310.JPG',

                show: false,
                pay_type: 0 //1 微信支付 2余额支付
            };
        },
        methods: {
            BuyBtn() {
                this.$showLoading('');
                this.show = false;
                this.$http
                    .get({
                        url: '/accountPay/getTimeCardPay',
                        data: {
                            id: this.cardId,
                            pay_type: this.pay_type
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 100) return this.$Toast(res.msg);
                        const result = res.data;
                        if (this.pay_type == 2) {
                            this.$emit('CardDetail');
                            this.$Toast('支付成功');
                            return;
                        }
                        if (result.extraData) {
                            wx.openEmbeddedMiniProgram({
                                appId: result.appId,
                                extraData: result.extraData
                            });
                        } else {
                            uni.getProvider({
                                service: 'oauth',
                                success: function (resp) {
                                    if (resp.provider) {
                                        uni.requestPayment({
                                            provider: resp.provider[0],
                                            orderInfo: result,
                                            timeStamp: result.timeStamp,
                                            nonceStr: result.nonceStr,
                                            package: result.package,
                                            signType: result.signType,
                                            paySign: result.paySign,
                                            success: (resj) => {
                                                this.$emit('CardDetail');
                                            },
                                            fail: (err) => {
                                                this.$emit('CardDetail');
                                            }
                                        });
                                    }
                                }
                            });
                        }
                    });
            }
        },
        computed: {
            ...mapState(['color'])
        }
    };
</script>

<style lang="scss" scoped>
    .Warpper {
        width: 100%;
        padding: 40rpx 40rpx 80rpx 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            color: #000;
            font-size: 36rpx;
            font-weight: bold;
        }

        .Box {
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-top: 40rpx;

            .list {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 30rpx 40rpx;
                border: 1px solid #f2f2f2;
                border-radius: 10rpx;
            }

            .active {
                border: 1px solid var(--color) !important;
            }
        }

        .Continue {
            width: 540rpx;
            height: 88rpx;
            background-color: #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 34rpx;
            border-radius: 10rpx;
            margin-top: 80rpx;
        }

        .conActive {
            background-color: var(--color);
        }
    }

    .Crad {
        width: 690rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        overflow: hidden;
        margin: 0 auto;

        &-info {
            width: 100%;
            padding: 24rpx;
            min-height: 260rpx;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .Buynow {
                width: 180rpx;
                height: 66rpx;
                background-color: rgba(0, 0, 0, 0.4);
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 28rpx;
                color: white;
                border-radius: 10rpx;
            }

            .Remaining {
                padding: 2rpx 10rpx;
                background-color: rgba(0, 0, 0, 0.5);
                color: #ffffff;
            }
        }

        .introduce {
            width: 100%;
            padding: 20rpx 24rpx;
            position: relative;
            font-size: 28rpx;
            color: #999;
        }

        .introduce::before {
            content: '';
            width: 0;
            height: 0;
            border-left: 10rpx solid transparent;
            /* 左边框 */
            border-right: 10rpx solid transparent;
            /* 右边框 */
            border-bottom: 20rpx solid white;
            /* 下边框 */
            position: absolute;
            top: -18rpx;
            left: 50rpx;
            z-index: 10;
        }
    }
</style>
